<template>
    <view :style="{'--color': color}">
        <status-bar title='店铺详情'></status-bar>
        <view class="topBg p-re">
            <view class="back bg00 p-ab"></view>
            <view class="card thmeBg p-re white">
                <image :src="$imgUrls('Uploads/User_img/shadingImg.png')" mode="aspectFill" class="img wh p-ab"></image>
                <view class="d-flex a-center">
                    <image :src="$imgUrls(pageData.logo)" mode="aspectFill" class="logo"></image>
                    <view class="p-left20 flex-1">
                        <view class="m-bot10">
                            <text class="label m-right10 d-inline-block" v-if="pageData.bussName">{{ pageData.bussName }}</text>
                            <text class="size28 bold">{{ pageData.name }}</text>
                        </view>
                        <view class="h6 m-bot10">{{ pageData.address }}</view>
                        <view class="d-flex">
                            <view class="m-right60">总单量: <text class="size28">{{ pageData.allOrderNum }}</text></view>
                            <view>总流水: <text class="size28">{{ pageData.allOrderMoney }}</text></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="padding30">
            <view class="d-flex j-sb a-center m-bot30"> 
                <view class="size32 bold">月订单/流水</view>
                <picker :value="date" mode="date" fields="month" :end="end" @change="dateChange">
                    <view>
                        <text class="size28 m-right10">{{ date }}</text>
                        <text class="iconfont icon-xiangxia1 bold"></text>
                    </view>
                </picker>
            </view>
            <view class="info bgf8 d-flex a-center text-center">
                <view class="w-333">
                    <view class="size40 color_FOD">{{ pageData.dispatchOrderNum }}</view>
                    <view class="size26 color_33">待安装(单)</view>
                </view>
                <view class="w-333">
                    <view class="size40 color_FOD">{{ pageData.dispatchOrderNum2 }}</view>
                    <view class="size26 color_33">已安装(单)</view>
                </view>
                <view class="w-333">
                    <view class="size40 color_FOD">{{ pageData.dispatchOrderNum3 }}</view>
                    <view class="size26 color_33">安装失败(单)</view>
                </view>
            </view>
            <view class="info bgf8 d-flex j-sa a-center text-center">
                <view class="w-333">
                    <view class="size40 color_FOD">{{ pageData.monthOrderNum }}</view>
                    <view class="size26 color_33">当月单量(单)</view>
                </view>
                <view class="w-333">
                    <view class="size40 color_FOD">{{ pageData.monthOrderMoney }}</view>
                    <view class="size26 color_33">当月流水</view>
                </view>
                <view class="w-333">
                    <view class="size40 color_FOD">{{ pageData.allNoDispatchOrderNum }}</view>
                    <view class="size26 color_33">总未预约(单)</view>
                </view>
            </view>
            <view class="p-left20 p-right20">
                <view class="bot_bor_ee p-top30 p-bot30 color_99" v-for="(item,index) in orderList" :key="index">
                    <view class="size28 color_33 m-bot10">单号：{{ item.order_code }}</view>
                    <view class="color_33 m-bot10">
                        <text class="size26 m-right10">{{ item.uname }}</text>
                        <text>{{ item.utel }}</text>
                    </view>
                    <view class="m-bot10 line34">{{ item.address }}</view>
                    <view class="m-bot10">金额：￥{{ item.payMoney }}</view>
                    <view class="m-bot10">时间：{{ item.addDate }}</view>
                    <view>
                        <text>{{ item.dispatchText }}</text>
                        <text class="thmeColor" v-if="['3','4'].includes(item.dispatchState)" @click="viewDetail(item)">【查看原因】</text>
                    </view>
                </view>
            </view>
        </view>

        <emptys v-if="noData" title="暂无数据"></emptys>

        <u-popup :show="show" :round="10" closeable @close="show = false">
            <view class="botPop padding30" v-if="failInfo">
                <view class="color_66 m-bot30" v-if="failInfo.end_time">结束日期：{{ failInfo.end_time }}</view>
                <view class="size28">{{ failInfo.end_content || '' }}</view>
                <view class="m-top30" v-if="failInfo.end_photo.length">
                    <block v-for="(item,index) in failInfo.end_photo" :key="index">
                        <image :src="$imgUrls(item)" mode="widthFix"></image>
                    </block>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            // 格式化时间戳
            const currentDate = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm')
            return {
                store_id: '',
                agent_id: '', // 代理商id
                getType: '', // 加盟1、众筹2、代理3
                date: currentDate,
                end: currentDate,
                getYear: '', 
                getMonth: '',
                pageData: '',
                orderList: [],
                noData: false,
                page: 1, // 第几页
                pageNum: 10, // 每页条数
                noMore: false, // 没有更多
                show: false,
                failInfo: ''
            }
        },
        computed: {
            ...mapState(['color'])
        },
        onLoad(e) {
            if(e.store_id) this.store_id = e.store_id
            if(e.agent_id) this.agent_id = e.agent_id
            if(e.getType) this.getType = e.getType
            
            this.getYear = this.date.split('-')[0]
            this.getMonth = this.date.split('-')[1]
            this.getDetail()
        },
        methods: {
            dateChange(e) {
                this.date = e.detail.value
                this.getYear = this.date.split('-')[0]
                this.getMonth = this.date.split('-')[1]
                this.page = 1
                this.getDetail()
            },
            getDetail() {
                this.noMore = false
                this.noData = false
                this.$http.post({
                    url: '/osmxcxApi/getStoreOrderList',
                    data: {
                        store_id: this.store_id,
                        agent_id: this.agent_id, // 代理需传
                        getYear: this.getYear, // 空为当前年
                        getMonth: this.getMonth, // 空为当前月
                        getType: this.getType,
                        page: this.page,
                        pageNum: this.pageNum
                    }
                }).then(res => {
                    this.pageData = res.data.storeFind
                    let result = res.data.orderList || []
                    this.orderList = this.page == 1 ? result : this.orderList.concat(result)
                    if(result.length < this.pageNum) this.noMore = true
                    if(!this.orderList.length) this.noData = true
                })
            },
            viewDetail(item) {
                this.failInfo = item.dispatchArr
                this.show = true
            }
        },
        onReachBottom() {
            if(this.noMore) return
            this.page ++ 
            this.getDetail()
        }
    }
</script>

<style lang="scss" scoped>
    .topBg {
        padding: 30rpx 30rpx 0 30rpx;
        .back {
            width: 100%;
            height: calc(100% - 30rpx);
            left: 0;
            top: 0;
        }
        .card {
            padding: 30rpx 20rpx 30rpx 30rpx;
            z-index: 1;
            .img {
                top: 0;
                left: 0;
            }
            .logo {
                width: 120rpx;
                height: 120rpx;
            }
            .label {
                padding: 4rpx 10rpx;
                background: #990000;
                border-radius: 10rpx;
                font-size: 22rpx;
                color: #fff;
            }
        }
    }
    .info {
        height: 120rpx;
    }
    .botPop {
        min-height: 300rpx;
        max-height: 80vh;
        overflow-y: auto;
    }
</style>